<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>我的关注</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .collection-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .collection-tab .tabBox.active{
        height: 0.6rem;
        /* font-size: 0.44rem; */
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #C7000B;
        line-height: 0.6rem;
        border-bottom: 0.06rem solid #C7000B;
      }
      .collection-info ul{
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .collection-info ul li .content-left {
          position: absolute;
          left: 0.32rem;
      }
      .collection-info ul li .content-left-litterText span:nth-child(1){
          margin-right: 0.28rem;
      }
      .collection-info ul li .content-right {
        position: absolute;
        right: 0.32rem;
        width: 2.12rem;
        height: 1.3rem;
        border-radius: 0.08rem;
      }
      .collection-info ul li .content-right img {
        width: 2.12rem;
        height: 1.3rem;
        border-radius: 0.08rem;
      }
      /*  */
      .collection-header {
    padding:0.22rem 0.32rem 0.26rem;
    font-family: PingFangSC-Medium;
    font-size: 0.32rem;
    letter-spacing: 0;
    text-align: center;
    position: fixed;
    z-index: 1;
    width: 100%;
  }
  .collection-tab {
    padding: 1.36rem 0.32rem 0.2rem;
    margin-bottom: 0.2rem;
  }
  .collection-tab .tabBox {
    margin-right: 0.5rem;
    height: 0.44rem;
    line-height: 0.44rem;
    font-size: 0.32rem;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    display: inline-block;
  }
  .collection-info ul li{
    padding: 0.36rem 0.32rem 0.36rem 0.32rem;
    position: relative;
    height: 2.36rem;
  }
  .content-left-main {
    width: 4.52rem;
    height: 0.88rem;
    font-family: PingFangSC-Medium;
    font-size: 0.3rem;
    letter-spacing: 0;
    text-align: left;
    line-height: 0.44rem;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .collection-info ul li .content-left-litterText {
    font-family: PingFangSC-Regular;
    font-size: 0.24rem;
    letter-spacing: 0;
    text-align: left;
    margin-top: 0.42rem;
  }
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->

  <!-- 头部 -->
  <div class="collection-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick='closeWindow()' class="headerimg">
    我的关注
  </div>

  <!-- tab栏切换 -->
  <div class="collection-tab">
    <div class="tabBox active" data-infoType=''>全部</div>
    <div class="tabBox" data-infoType='1'>图文资讯</div>
    <div class="tabBox" data-infoType='2'>视频</div>
  </div>

  <!-- 资讯 -->
  <div class="collection-info">
      <ul>
      </ul>
  </div>

</div>
</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  let pageNum = 1
  let infoType = ''
  let token
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    //设置深色模式
    if(configColorType === '1'){
        $('.headerimg').attr('src','../../images/allPic/blackfanhui.png')
    }else{
        $('.headerimg').attr('src','../../images/allPic/jiantou.png')
    }

    $('.collection-info ul').empty()
    getCollectionList({'infoType':'','pageNum':pageNum})
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  function reLoadPage() {
    $('.collection-info ul').empty()
    //设置返回之后显示的内容
    let mark = $('.active').attr('data-infoType')
    pageNum = 1
    if(mark === ''){
      getCollectionList({'infoType':mark,'pageNum':pageNum})
    }else if(mark === '1'){
      getCollectionList({'infoType':mark,'pageNum':pageNum})
    }else if(mark === '2'){
      getCollectionList({'infoType':mark,'pageNum':pageNum})
    }
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //节流
  let prev = Date.now()
  function throttle (fn, delay) {
  const now = Date.now()
  if (now - prev > delay) {
    fn()
    prev = Date.now()
  }
}
  //点击tab栏切换状态,根据选中条件获取不同数据
  $('.tabBox').on('click',function(e){
      throttle(() => {
        $('.collection-info ul').empty()
        $(this).addClass('active').siblings().removeClass('active')
        infoType = $(this).attr('data-infoType')
        pageNum = 1
        getCollectionList({'infoType':infoType,'pageNum':pageNum})
      },500)
  })
  //获取列表
  function getCollectionList(params){
      Server.myowninfo.collectionList({'infoType':params.infoType,'pageNum':params.pageNum,'pageSize':10}).then(res => {
          console.log(res,'res')
          // alert(JSON.stringify(res))
          if(res.data.code === '1'){
              let list = res.data.result.list
              list.map((item,index) => {
                let creatTime = item.issuerDttm*1000
                let nowTime = +new Date().valueOf()
                let year = new Date(creatTime).getFullYear()
                let month = new Date(creatTime).getMonth()+1<10?'0'+(new Date(creatTime).getMonth()+1):new Date(creatTime).getMonth()+1
                let day = new Date(creatTime).getDate()<10?'0'+new Date(creatTime).getDate():new Date(creatTime).getDate()
                let hour = new Date(creatTime).getHours()<10?'0'+ new Date(creatTime).getHours(): new Date(creatTime).getHours()
                let minute = new Date(creatTime).getMinutes()<10?'0'+new Date(creatTime).getMinutes():new Date(creatTime).getMinutes()
                if(nowTime - creatTime < 30*60*1000){
                  if(nowTime - creatTime < 1*60*1000){
                    item.issuerDttm = '刚刚'
                  }else{
                    item.issuerDttm = parseInt((nowTime - creatTime)/1000/60)+'分钟前'
                  }
                }else if(nowTime - creatTime < 24*60*60*1000){
                    if(nowTime-creatTime < 60*60*1000){
                      item.issuerDttm = '1小时前'
                    }else {
                      item.issuerDttm = parseInt((nowTime - creatTime)/1000/60/60)+'小时前'
                    }
                }else if(new Date().getDate()-new Date(creatTime).getDate()==1 && new Date().getMonth()==new Date(creatTime).getMonth() && new Date().getFullYear() == new Date(creatTime).getFullYear()){
                  item.issuerDttm = '昨天'+hour+":"+minute
                }else{
                  item.issuerDttm = year +'-'+ month+'-'+day+' '+hour+':'+minute
                }
              })

              list.map((v,i) => {
                  let li =
                  `<li onclick="gozixundetails({'infoId':'${v.infoId}','infoType':'${v.infoType}','funcCode':'${v.funcCode}'})">
                        <div class="content-left">
                        <div class="content-left-main" style="width:${v.coverImgUrl?'':'100%'}">${v.mainTitle}</div>
                        <div class="content-left-litterText" style="width:${v.coverImgUrl?'':'100%'}">
                            <span>${v.issuerDttm}</span><span style="display:${v.infoType==='2'?'block':'none'}">${v.readCnt}人已阅读</span>
                        </div>
                        </div>
                        <div class="content-right" style="display:${v.coverImgUrl?'block':'none'}">
                        <img src="${v.coverImgUrl}" alt="">
                        </div>
                    </li>`

                    $('.collection-info ul').append(li)
              })
          }else{

          }
      })
  }
  //点击去对应得详情
  function gozixundetails(params){
    let infoType = params.infoType
    if(infoType === '1'){
      jsBridge.openWindow('/html/details/Information-details.html?infoId='+params.infoId+'&infoType='+params.infoType+'&funcCode='+params.funcCode+'&isopencomment=0',{}, {noBar: false})
    }else if(infoType === '2'){
      jsBridge.openWindow('/html/video/videoplay.html?infoId='+params.infoId+'&isopencomment=0',{}, {noBar: false})
    }
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.collection-info ul').offset().top
    let height = $('.collection-info ul').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(Math.round(top+height-maxHeight),'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
      pageNum++
      getCollectionList({'infoType':infoType,'pageNum':pageNum})
    }
  })
</script>
</html>
